<template>
    <div ref="wrapper" class="bscroll">
        <slot></slot>
    </div>
</template>

<script type="es6">
    import BScroll from 'better-scroll'

    export default{
        props: {
            probeType: {
                type: Number,
                default: 1
            },
            click: {
                type: Boolean,
                default: true
            },
            data: {
                type: Array,
                default: null
            }
        },
        mounted(){
            setTimeout(()=> {
                this._initScroll()
            }, 20)
        },
        methods: {
            _initScroll(){
                if (!this.$refs.wrapper) {
                    return
                }
                this.scroll = new BScroll(this.$refs.wrapper, {
                    probeType: this.probeType,
                    click: this.click
                })
            },
            enable(){
                this.scroll && this.scroll.enable()
            },
            disable(){
                this.scroll && this.scroll.disable()
            },
            refresh(){
                console.log('scroll refresh');
                //console.log(this.scroll)
                this.scroll && this.scroll.refresh();
                //console.log(this.scroll)
            },
          scrollTO(){
            this.scroll && this.scroll.scrollTo.apply(this.scroll,arguments)
          },
          scrollToElement(){
            console.log('scroll scrollToElement');
            this.scroll && this.scroll.scrollToElement.apply(this.scroll,arguments)
          }
        },
        watch: {
            data(){//当data 变化 重新刷新
                setTimeout(()=> {
                    console.log("当data 变化 scroll重新刷新");
                    this.refresh()
                }, 20)
            }
        }
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
    .bscroll
        height:100%

</style>
